<template>
	<div id="div" class="div" ref="div"></div>
</template>

<script>
	import * as echarts from 'echarts';
	import 'echarts/map/js/china.js';
	export default {
		mounted() {
			this.init()
		},
		data(){
			return {
				chinaGeoCoordMap:{
		'黑龙江': [127.9688, 45.368],
		'内蒙古': [110.3467, 41.4899],
		"吉林": [125.8154, 44.2584],
		'北京市': [116.4551, 40.2539],
		"辽宁": [123.1238, 42.1216],
		"河北": [114.4995, 38.1006],
		"天津": [117.4219, 39.4189],
		"山西": [112.3352, 37.9413],
		"陕西": [109.1162, 34.2004],
		"甘肃": [103.5901, 36.3043],
		"宁夏": [106.3586, 38.1775],
		"青海": [101.4038, 36.8207],
		"新疆": [87.9236, 43.5883],
		"西藏": [91.11, 29.97],
		"四川": [103.9526, 30.7617],
		"重庆": [108.384366, 30.439702],
		"山东": [117.1582, 36.8701],
		"河南": [113.4668, 34.6234],
		"江苏": [118.8062, 31.9208],
		"安徽": [117.29, 32.0581],
		"湖北": [114.3896, 30.6628],
		"浙江": [119.5313, 29.8773],
		"福建": [119.4543, 25.9222],
		"江西": [116.0046, 28.6633],
		"湖南": [113.0823, 28.2568],
		"贵州": [106.6992, 26.7682],
		"云南": [102.9199, 25.4663],
		"广东": [113.12244, 23.009505],
		"广西": [108.479, 23.1152],
		"海南": [110.3893, 19.8516],
		'上海': [121.4648, 31.2891]
	},
	chinaDatas : [
		[{
			name: '黑龙江',
			value: 0
		}],	[{
			name: '内蒙古',
			value: 0
		}],	[{
			name: '吉林',
			value: 0
		}],	[{
			name: '辽宁',
			value: 0
		}],	[{
			name: '河北',
			value: 0
		}],	[{
			name: '天津',
			value: 0
		}],	[{
			name: '山西',
			value: 0
		}],	[{
			name: '陕西',
			value: 0
		}],	[{
			name: '甘肃',
			value: 0
		}],	[{
			name: '宁夏',
			value: 0
		}],	[{
			name: '青海',
			value: 0
		}],[{
			name: '西藏',
			value: 0
		}],	[{
			name: '四川',
			value: 0
		}],	[{
			name: '重庆',
			value: 0
		}],	[{
			name: '山东',
			value: 0
		}],	[{
			name: '河南',
			value: 0
		}],	[{
			name: '江苏',
			value: 0
		}],	[{
			name: '安徽',
			value: 0
		}],	[{	
		    name: '湖北',
			value: 0
		}],	[{
			name: '浙江',
			value: 1
		}],	[{
			name: '福建',
			value: 0.5
		}],	[{
			name: '江西',
			value: 0.6
		}],	[{
			name: '湖南',
			value: 0.7
		}],	[{
			name: '贵州',
			value: 0
		}],[{
			name: '广西',
			value: 0
		}],	[{
			name: '海南',
			value: 0
		}],	[{
			name: '上海',
			value: 0
		}]
	]
			}
		},
		methods:{
			convertData (data) {
				var res = [];
				for(var i = 0; i < data.length; i++) {
					var dataItem = data[i];
					var fromCoord = this.chinaGeoCoordMap[dataItem[0].name];
					var toCoord = [116.4551,40.2539];
					if(fromCoord && toCoord) {
						res.push([{
							coord: fromCoord,
							value: dataItem[0].value
						}, {
							coord: toCoord,
						}]);
					}
				}
				return res;
			},
			drawGraph(){
				},
			init(){
				var series = [];
				let that=this;
				[['北京市', this.chinaDatas]].forEach(function(item, i) {
				    
					series.push({
							type: 'lines',
							zlevel: 2,
							effect: {
								show: true,
								period: 4, //箭头指向速度，值越小速度越快
								trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
								symbol: 'arrow', //箭头图标
								symbolSize: 5, //图标大小
							},
							lineStyle: {
								normal: {
									width: 1, //尾迹线条宽度
									opacity: 1, //尾迹线条透明度
									curveness: .3 //尾迹线条曲直度
								}
							},
							data: that.convertData(item[1])
						}, {
							type: 'effectScatter',
							coordinateSystem: 'geo',
							zlevel: 2,
							rippleEffect: { //涟漪特效
								period: 4, //动画时间，值越小速度越快
								brushType: 'stroke', //波纹绘制方式 stroke, fill
								scale: 4 //波纹圆环最大限制，值越大波纹越大
							},
							label: {
								normal: {
									show: true,
									position: 'right', //显示位置
									offset: [5, 0], //偏移设置
									formatter: function(params){//圆环显示文字
										return params.data.name;
									},
									fontSize: 13
								},
								emphasis: {
									show: true
								}
							},
							symbol: 'circle',
							symbolSize: function(val) {
								console.log(val)
								return 5+ val[2] * 5; //圆环大小
							},
							itemStyle: {
								normal: {
									show: false,
									color: '#f00'
								}
							},
							data: item[1].map(function(dataItem) {
								return {
									name: dataItem[0].name,
									value: that.chinaGeoCoordMap[dataItem[0].name].concat([dataItem[0].value])
								};
							}),
						},
						//被攻击点
						{
							type: 'scatter',
							coordinateSystem: 'geo',
							zlevel: 2,
							rippleEffect: {
								period: 4,
								brushType: 'stroke',
								scale: 4
							},
							// label: {
							// 	normal: {
							// 		show: true,
							// 		position: 'right',
							// 		//offset:[5, 0],
							// 		color: '#0f0',
							// 		formatter: '{b}',
							// 		textStyle: {
							// 			color: "#0f0"
							// 		}
							// 	},
								// emphasis: {
								// 	show: true,
								// 	color: "#f60"
								// }
							//},
							symbol: 'pin',
							symbolSize: 50,
							data: [{
								name: item[0],
								value: that.chinaGeoCoordMap[item[0]].concat([10]),
							}],
						}
					);
				});
				var option = {
					tooltip: {
						trigger: 'item',
						backgroundColor: 'rgba(166, 200, 76, 0.82)',
						borderColor: '#FFFFCC',
						showDelay: 0,
						hideDelay: 0,
						enterable: true,
						transitionDuration: 0,
						extraCssText: 'z-index:100',
						formatter: function(params, ticket, callback) {
							//根据业务自己拓展要显示的内容
							var res = "";
							var name = params.name;
							var value = params.value[params.seriesIndex + 1];
							res = "<span style='color:#fff;'>" + name + "</span><br/>数据：" + value;
							return res;
						}
					},
					backgroundColor:"#013954",
					visualMap: { //图例值控制
						min: 0,
						max: 1,
						calculable: true,
						show: true,
						color: ['#f44336', '#fc9700', '#ffde00', '#ffde00', '#00eaff'],
						textStyle: {
							color: '#fff'
						}
					},
					geo: {
						map: 'china',
						zoom: 1.2,
						label: {
							emphasis: {
								show: false
							}
						},
						roam: true, //是否允许缩放
						itemStyle: {
							normal: {
								color: 'rgba(51, 69, 89, .5)', //地图背景色
								borderColor: '#516a89', //省市边界线00fcff 516a89
								borderWidth: 1
							},
							emphasis: {
								color: 'rgba(37, 43, 61, .5)' //悬浮背景
							}
						}
					},
					series: series
				};
				echarts.init(this.$refs.div).setOption(option);
			}
		}
	}
</script>

<style>
	#div {
		width: 600px;
		height: 400px;
	}
</style>
